<template>
  <div>
    <div class="b1">
      <el-form :inline="true" :model="connect" class="demo-form-inline">
        <el-form-item label="地址">
          <el-input
            v-model="connect.address"
            placeholder="地址"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="端口">
          <el-input
            v-model="connect.port"
            placeholder="端口"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="init(true)">连接</el-button>
          <el-button type="danger" @click="init(false)">关闭</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="connect.status" style="width: 200px"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="selectForm(true)">上报</el-button>
          <el-button @click="selectForm(false)">停止</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="startsimulation(true)">开始模拟</el-button>
          <el-button @click="startsimulation(false)">结束模拟</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="b2">
      <div class="top">
        <h2>上报数据模拟</h2>
      </div>
      <div class="bottom">
        <div class="c1">
          <!-- 车辆 -->
          <div class="d1">
            <el-form
              ref="form"
              :model="form"
              label-width="10px"
              class="ivu-form-item"
            >
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: 10px; width: 84%"
              >
                <span>VIN</span><el-input v-model="form.vin"></el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: 10px"
              >
                <span>选择路线</span><br />
                <el-select
                  v-model="vehicle.way"
                  placeholder="请选择行使路线"
                  style="width: 84%"
                >
                  <el-option label="路线1" value="1"></el-option>
                  <el-option label="路线2" value="2"></el-option>
                  <el-option label="路线3" value="3"></el-option>
                  <el-option label="路线5" value="3"></el-option>
                  <el-option label="路线6" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>车速</span>
                <el-input v-model="vehicle.speed" placeholder="车速">
                  <template slot="append">KM/H</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>里程</span>
                <el-input v-model="vehicle.mileage" placeholder="里程">
                  <template slot="append">KM</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>总电压</span>
                <el-input v-model="vehicle.voltage" placeholder="总电压">
                  <template slot="append">V</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>总电流</span>
                <el-input v-model="vehicle.electricity" placeholder="总电流">
                  <template slot="append">A</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>绝缘电阻</span>
                <el-input v-model="vehicle.resistance" placeholder="绝缘电阻">
                  <template slot="append">Ω</template>
                </el-input>
              </el-form-item>
<!--              <el-form-item-->
<!--                label=""-->
<!--                style="margin-top: -5px; margin-bottom: -5px; width: 84%"-->
<!--              >-->
<!--                <span>档位</span><br />-->
<!--                <el-select-->
<!--                  v-model="vehicle.gears"-->
<!--                  placeholder="请选择档位"-->
<!--                  style="width: 90%"-->
<!--                >-->
<!--                  <el-option label="驻车" value="1"></el-option>-->
<!--                  <el-option label="倒车" value="2"></el-option>-->
<!--                  <el-option label="空挡" value="3"></el-option>-->
<!--                  <el-option label="正常模式" value="4"></el-option>-->
<!--                  <el-option label="运动模式" value="5"></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>加速踏板行程值</span>
                <el-input
                  v-model="vehicle.accelerate"
                  placeholder="加速踏板行程值"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>制动踏板行程值</span>
                <el-input
                  v-model="vehicle.trig"
                  placeholder="制动踏板行程值"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>燃油消耗率</span>
                <el-input v-model="vehicle.fuelrate" placeholder="燃油消耗率">
                  <template slot="append">L/百公里</template>
                </el-input>
              </el-form-item>
              <!-- <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item> -->
            </el-form>
          </div>
          <!-- 电机 -->
          <div class="d2">
            <el-form
              ref="form"
              :model="form"
              label-width="10px"
              class="ivu-form-item"
            >
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: 10px; width: 84%"
              >
                <span>电机控制器温度</span>
                <el-input
                  v-model="machinery.cu"
                  placeholder="电机控制器温度"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: 10px; width: 84%"
              >
                <span>电机转速</span>
                <el-input
                  v-model="machinery.rotate"
                  placeholder="电机转速"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: 10px; width: 84%"
              >
                <span>电机转矩</span>
                <el-input
                  v-model="machinery.torque"
                  placeholder="电机转矩"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: 10px; width: 84%"
              >
                <span>电机温度</span>
                <el-input
                  v-model="machinery.temperature"
                  placeholder="电机温度"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: 10px; width: 84%"
              >
                <span>电机电压</span>
                <el-input
                  v-model="machinery.voltage"
                  placeholder="电机电压"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: 10px; width: 84%"
              >
                <span>电机电流</span>
                <el-input
                  v-model="machinery.electricity"
                  placeholder="电机电流"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 效率 -->
          <div class="d3">
            <el-form
              ref="form"
              :model="form"
              label-width="15px"
              class="ivu-form-item"
            >
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>动力电池剩余电量SOC</span>
                <el-input
                  v-model="efficiency.electric"
                  placeholder="动力电池剩余电量SOC"
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>当前状态允许的最大反馈功率</span>
                <el-input
                  v-model="efficiency.feedback"
                  placeholder="当前状态允许的最大反馈功率"
                >
                  <!-- <template slot="append">KM</template> -->
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>当前状态允许的最大电功率</span>
                <el-input
                  v-model="efficiency.power"
                  placeholder="当前状态允许的最大电功率"
                >
                  <template slot="append">V</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>BMS自检计数器</span>
                <el-input
                  v-model="efficiency.counter"
                  placeholder="BMS自检计数器"
                >
                  <!-- <template slot="append">A</template> -->
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>动力电池充放电电流</span>
                <el-input
                  v-model="efficiency.electricity"
                  placeholder="动力电池充放电电流"
                >
                  <template slot="append">A</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>动力电池负载端总电压V3</span>
                <el-input
                  v-model="efficiency.pressure"
                  placeholder="动力电池负载端总电压V3"
                >
                  <template slot="append">V</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>单次最大电压</span>
                <el-input
                  v-model="efficiency.peakvoltage"
                  placeholder="单次最大电压"
                >
                  <template slot="append">V</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>单体电池最低电压</span>
                <el-input
                  v-model="efficiency.minimumvoltage"
                  placeholder="单次电池最低电压"
                >
                  <template slot="append">V</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>单体电池最高温度</span>
                <el-input
                  v-model="efficiency.maximumtemperature"
                  placeholder="单体电池最高温度"
                >
                  <template slot="append">℃</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>单体电池最低温度</span>
                <el-input
                  v-model="efficiency.minimumtemperature"
                  placeholder="单体电池最低温度"
                >
                  <template slot="append">℃</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label=""
                style="margin-top: -5px; margin-bottom: -5px; width: 84%"
              >
                <span>动力电池可用容量</span>
                <el-input
                  v-model="efficiency.capacity"
                  placeholder="动力电池可用容量"
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="c2">
          <div class="e1">
            <div class="f1">
              <span>车辆状态：</span><br />
              <template>
                <el-radio v-model="radio1" label="1">正常</el-radio>
                <el-radio v-model="radio1" label="2">异常</el-radio> </template
              ><br /><br />
              <span>充电状态：</span><br />
              <template>
                <el-radio v-model="radio2" label="1">正常</el-radio>
                <el-radio v-model="radio2" label="2">异常</el-radio> </template
              ><br /><br />
              <span>运行状态：</span><br />
              <template>
                <el-radio v-model="radio3" label="1">正常</el-radio>
                <el-radio v-model="radio3" label="2">异常</el-radio> </template
              ><br /><br />
              <span>SCO :</span><br />
              <template>
                <el-radio v-model="radio4" label="1">正常</el-radio>
                <el-radio v-model="radio4" label="2">异常</el-radio> </template
              ><br /><br />
              <span>可充电储能装置工作状态：</span><br />
              <template>
                <el-radio v-model="radio5" label="1">正常</el-radio>
                <el-radio v-model="radio5" label="2">异常</el-radio> </template
              ><br /><br />
              <span>驱动：</span><br />
              <template>
                <el-radio v-model="radio6" label="1">正常</el-radio>
                <el-radio v-model="radio6" label="2">异常</el-radio> </template
              ><br /><br />
              <span>定位是否有效：</span><br />
              <template>
                <el-radio v-model="radio7" label="1">正常</el-radio>
                <el-radio v-model="radio7" label="2">异常</el-radio> </template
              ><br /><br />
            </div>
            <div class="f2">
              <span>EAS(汽车防盗系统)状态：</span><br />
              <template>
                <el-radio v-model="radio8" label="1">正常</el-radio>
                <el-radio v-model="radio8" label="2">异常</el-radio> </template
              ><br /><br />
              <span>PTC(电动加热器)状态：</span><br />
              <template>
                <el-radio v-model="radio9" label="1">正常</el-radio>
                <el-radio v-model="radio9" label="2">异常</el-radio> </template
              ><br /><br />
              <span>EPS(电动助力系统)状态：</span><br />
              <template>
                <el-radio v-model="radio10" label="1">正常</el-radio>
                <el-radio v-model="radio10" label="2">异常</el-radio> </template
              ><br /><br />
              <span>ABS(防抱死)状态：</span><br />
              <template>
                <el-radio v-model="radio11" label="1">正常</el-radio>
                <el-radio v-model="radio11" label="2">异常</el-radio> </template
              ><br /><br />
              <span>MCU(电机/逆变器)状态</span><br />
              <template>
                <el-radio v-model="radio12" label="1">正常</el-radio>
                <el-radio v-model="radio12" label="2">异常</el-radio> </template
              ><br /><br />
            </div>
            <div class="f3">
              <span>动力电池加热状态：</span><br />
              <template>
                <el-radio v-model="radio13" label="1">正常</el-radio>
                <el-radio v-model="radio13" label="2">异常</el-radio> </template
              ><br /><br />
              <span>动力电池当前状态：</span><br />
              <template>
                <el-radio v-model="radio14" label="1">正常</el-radio>
                <el-radio v-model="radio14" label="2">异常</el-radio> </template
              ><br /><br />
              <span>动力电池保温状态：</span><br />
              <template>
                <el-radio v-model="radio15" label="1">正常</el-radio>
                <el-radio v-model="radio15" label="2">异常</el-radio> </template
              ><br /><br />
              <span>DCDC(电力交换系统)状态：</span><br />
              <template>
                <el-radio v-model="radio16" label="1">正常</el-radio>
                <el-radio v-model="radio16" label="2">异常</el-radio> </template
              ><br /><br />
              <span>CHG(充电机)状态：</span><br />
              <template>
                <el-radio v-model="radio17" label="1" >正常</el-radio>
                <el-radio v-model="radio17" label="2">异常</el-radio> </template
              ><br /><br />
            </div>
          </div>
          <div class="e2" ref="e2">
            <!-- <el-button @click="selectForm(true)">上报</el-button>
            <el-button @click="selectForm(false)">停止</el-button> -->
            <div ref="container" class="container">
              <div v-for="(time, i) in list" :key="i" height="250">
                {{ dateFormat(time.date) }}&nbsp;{{ time.text.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {sendLog} from "@/api/system/logs";
import {sendSj,sendSj2} from "@/api/system/car";
export default {
  data() {
    return {
      logg:'',
      inp:'',
      // wsUrl: "ws://localhost:8001/robot/test",
      wsUrl: "",
      socket: "",
      inputMsg: 0,
      list: [],
      timer: "", //定时器
      simulatedinputMsg: 0,
      simulatedtimer: "", //模拟数据数值定时器
      //socket连接
      connect: {
        address: "127.0.0.1", //地址
        port: "8005", //端口
        status: "未连接", //连接状态
        // 判断是否连接成功、
        radio: 1,
      }, //是否连接
      //车辆
      vehicle: {
        vin: "", //VIN
        way: "", //路线
        speed: "", //车速
        mileage: "", //里程
        voltage: "", //总电压
        electricity: "", //总电流
        resistance: "", //绝缘电阻
        gears: "", //档位
        accelerate: "", //加速踏板行程值
        trig: "", //制动踏板行程值
        fuelrate: "", //燃油消耗率
      },
      //电机
      machinery: {
        cu: "", //  电机控制器温度
        rotate: "", //电机转速
        torque: "", //电机转矩
        temperature: "", //电机温度
        voltage: "", //电机电压
        electricity: "", //电机电流
      },
      // 效率
      efficiency: {
        electric: "", //  动力电池剩余电量SOC
        feedback: "", //  当前状态允许的最大反馈功率
        power: "", //  当前状态允许的最大电功率
        counter: "", //  BMS自检计数器
        electricity: "", //  动力电池充放电电流
        pressure: "", //  动力电池负载端总电压V3
        peakvoltage: "", //  单次最大电压
        minimumvoltage: "", //  单体电池最低电压
        maximumtemperature: "", //  单体电池最高温度
        minimumtemperature: "", //  单体电池最低温度
        capacity: "", //  动力电池可用容量
      },
      form: {},
      radio1: "1",
      radio2: "1",
      radio3: "1",
      radio4: "1",
      radio5: "1",
      radio6: "1",
      radio7: "1",
      radio8: "1",
      radio9: "1",
      radio10: "1",
      radio11: "1",
      radio12: "1",
      radio13: "1",
      radio14: "1",
      radio15: "1",
      radio16: "1",
      radio17: "1",
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    sendMessage(){
      sendSj().then(resp=>{

      })
    },
    sendMessage2(){
      sendSj2().then(resp=>{

      })
    },
    toSendMsg(logg){
      sendLog(logg).then(response => {
        console.log(logg)
      });
    },

    onSubmit() {},
    //开始模拟
    startsimulation(msg) {
      if (this.form.vin==null){
        alert("请输入车辆VIN码")
        return;
      }

      if (msg) {
        clearInterval(this.simulatedtimer); //确保定时器关闭
        this.sendMessage()
        this.simulatedtimer = setInterval(this.simulated, 1000); //开启定时器

      } else {
        this.sendMessage2()
        clearInterval(this.simulatedtimer); //关闭定时器

      }
    },
    //给模拟数据赋值
    simulated() {
      //没有连接上不能模拟数据
      if (this.connect.radio == 1) {
        return;
      }
      //车辆===========
      //车速
      var value = Math.random() * 300;
      this.vehicle.speed = parseFloat(value).toFixed(2);
      //里程
      var value = Math.random() * 1000000;
      this.vehicle.mileage = parseFloat(value).toFixed(3);
      //总电压
      var value = Math.random() * 100;
      this.vehicle.voltage = parseFloat(value).toFixed(2);
      //总电流
      var value = Math.random() * 100;
      this.vehicle.electricity = parseFloat(value).toFixed(2);
      //绝缘电阻
      var value = Math.random() * 200000;
      this.vehicle.resistance = parseFloat(value).toFixed(2);
      //加速踏板行程值
      this.vehicle.accelerate = Math.ceil(Math.random() * 19) + 1;
      //制动踏板行程值
      this.vehicle.trig = Math.ceil(Math.random() * 19) + 1;
      //燃油消耗率
      var value = Math.random() * 30;
      this.vehicle.fuelrate = parseFloat(value).toFixed(2);


      // 电机控制器温度
      var value = Math.random() * 100;
      this.machinery.cu = parseFloat(value).toFixed(2);
      //电机转速
      this.machinery.rotate = Math.ceil(Math.random() * 2000) + 1;
      //电机转矩
      this.machinery.torque = Math.ceil(Math.random() * 1000) + 1;
      //电机温度
      var value = Math.random() * 100;
      this.machinery.temperature = parseFloat(value).toFixed(2);
      //电机电压
      var value = Math.random() * 3;
      this.machinery.voltage = parseFloat(value).toFixed(2);
      //电机电流
      var value = Math.random() * 2000;
      this.machinery.electricity = parseFloat(value).toFixed(2);

      //效率===============
      //  动力电池剩余电量SOC
      var value = Math.random() * 100;
      this.efficiency.electric = parseFloat(value).toFixed(2);
      //  当前状态允许的最大反馈功率
      var value = Math.random() * 100;
      this.efficiency.feedback = parseFloat(value).toFixed(2);
      //  当前状态允许的最大电功率
      var value = Math.random() * 100;
      this.efficiency.power = parseFloat(value).toFixed(2);
      //  BMS自检计数器
      this.efficiency.counter = Math.ceil(Math.random() * 20) + 1;
      //  动力电池充放电电流
      var value = Math.random() * 10;
      this.efficiency.electricity = parseFloat(value).toFixed(2);
      //  动力电池负载端总电压V3
      var value = Math.random() * 1000;
      this.efficiency.pressure = parseFloat(value).toFixed(2);
      //  单次最大电压
      var value = Math.random() * 10;
      this.efficiency.peakvoltage = parseFloat(value).toFixed(2);
      //  单体电池最低电压
      var value = Math.random() * 10;
      this.efficiency.minimumvoltage = parseFloat(value).toFixed(2);
      //  单体电池最高温度
      var value = Math.random() * 100;
      this.efficiency.maximumtemperature = parseFloat(value).toFixed(2);
      //  单体电池最低温度
      var value = Math.random() * 100;
      this.efficiency.minimumtemperature = parseFloat(value).toFixed(2);
      //  动力电池可用容量
      var value = Math.random() * 100;
      this.efficiency.capacity = parseFloat(value).toFixed(2);
    },

    //上报停止按钮链接
    selectForm(msg) {
      if (this.form.vin==null){
        alert("请输入车辆VIN码")
        return;
      }
      window.sessionStorage.setItem("vinCode",this.form.vin)
      if (msg) {
        clearInterval(this.timer); //确保定时器关闭
        this.inputMsg = 1;
        this.timer = setInterval(this.bindEnter, 1000); //开启定时器
      } else {
        this.inputMsg = 2;
        this.bindEnter();
        clearInterval(this.timer); //关闭定时器
      }
    },

    //socket连接
    init(msg) {
      if (msg) {//连接
        if (typeof WebSocket === "undefined") {
          this.$message({
            type: "error",
            message: "您的浏览器不支持socket",
          });
        } else {
          //实例化socket
          this.wsUrl =
            "ws://" +
            this.connect.address +
            ":" +
            this.connect.port +
            "/robot/test";
          this.socket = new WebSocket(this.wsUrl);
          this.socket.onopen = this.open;
          this.socket.onerror = this.error;
          this.socket.onmessage = this.getMessage;
        }
      }else{//关闭连接
        location.reload()
      }
    },
    sendMsg(){
      this.send(this.inp)
    },
    //连接成功
    open() {
      console.log("socket连接成功");
      this.connect.status = "已连接";
      this.connect.radio = 2;
    },
    //连接失败
    error() {
      console.log("连接错误");
      this.connect.radio = 1;
    },
    getMessage(msg) {
      console.log(msg.data);
      this.list.push({
        date: Date(),
        text: { text: msg.data },
        mine: false,
        name: "fwd",
      });
    },
    send(params) {
      this.socket.send(params);
    },
    close() {
      console.log("socket已经关闭");
    },
    //滚动条跑最后一行
    bindEnter() {
      if (this.radio1==2){
        this.inp="车辆状态";
        this.socket.send(this.inp+","+this.form.vin);
        this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);
      }
      if (this.radio2==2){this.inp="充电状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg); }
      if (this.radio3==2){this.inp="运行状态";this.socket.send(this.inp+","+this.form.vin); this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg); }
      if (this.radio4==2){this.inp="SCO";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio5==2){this.inp="可充电储能装置工作状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio6==2){this.inp="驱动";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio7==2){this.inp="定位";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio8==2){this.inp="EAS(汽车防盗系统)状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio9==2){this.inp="PTC(电动加热器)状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio10==2){this.inp="EPS(电动助力系统)状态";this.socket.send(this.inp+","+this.form.vin); this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg); }
      if (this.radio11==2){this.inp="ABS(防抱死)状态";this.socket.send(this.inp+","+this.form.vin); this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio12==2){this.inp="MCU(电机/逆变器)状态";this.socket.send(this.inp+","+this.form.vin); this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio13==2){this.inp="动力电池加热状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio14==2){this.inp="动力电池当前状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio15==2){this.inp="动力电池保温状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio16==2){this.inp="DCDC(电力交换系统)状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio17==2){this.inp="CHG(充电机)状态";this.socket.send(this.inp+","+this.form.vin);  this.logg=this.inp+","+this.form.vin;this.toSendMsg(this.logg);}
      if (this.radio1==1 && this.radio2==1 &&  this.radio3==1 &&  this.radio4==1 &&  this.radio5==1 &&  this.radio6==1 &&  this.radio7==1 &&  this.radio8==1 &&  this.radio9==1 &&  this.radio10==1 &&  this.radio11==1 &&  this.radio12==1 &&  this.radio13==1  &&  this.radio14==1 &&  this.radio15==1 &&  this.radio16==1 &&  this.radio17==1 ) {
        this.inp='a';
        this.socket.send(this.inp+","+this.form.vin);
      }
      var div = this.$refs.e2;
      setTimeout(() => {
        div.scrollTop = div.scrollHeight;
      }, 100);
      // this.inp =
      //   "[vehicle_base7X 01 01 01 01 01 01 01 7X] 智能硬件报文:[vehicle_pats7X 01 01 01 01 01 7X] 电池状本报文[vehicle_battery7X 01 01 01 01 01 7X]";
    },
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
};
</script>

<style>
/* .el-form-item{
    margin-bottom: -5px;
} */
/* 顶div */
.b1 {
  border-style: solid;
  border-color: rgba(6, 118, 210, 0.56);
  /* border-color: cornflowerblue; */
  width: 99%;
  height: 45px;
  margin-bottom: 10px;
  padding-left: 10px;
}
/* 下div */
.b2 {
  /* background-color: red; */
  /* display: flex;
  width: auto; */
  border-style: solid;
  border-color: rgba(6, 118, 210, 0.56);
  height: 950px;
}
/* 下上 */
.top {
  /* background-color: red; */
  /* display: flex;
  width: auto; */
  /* padding-top: 11px; */
  padding-left: 20px;
  border-bottom: solid;
  border-color: rgba(6, 118, 210, 0.56);
  height: 40px;
  width: 99%;
}
/* 下下 */
.bottom {
  /* background-color: red; */
  /* border-style: solid; */
  /* border-color: rgba(6, 118, 210, 0.56); */
  display: flex;
  width: auto;
  height: 900px;
  width: 100%;
}

/* 左div */
.c1 {
  border-right: solid;
  border-color: rgba(6, 118, 210, 0.56);
  /* border-color: cornflowerblue; */
  width: 50%;
  height: 900px;
  display: flex;
}
/* 右div */
.c2 {
  /* border-style: solid; */
  /* border-color: rgba(6, 118, 210, 0.56); */
  width: 49%;
  height: 900px;
}
/* 左1 */
.d1 {
  /* background-color: blue; */
  /* border-color: rgba(6, 118, 210, 0.56); */
  width: 33%;
  height: 900px;
}
/* 左2 */
.d2 {
  /* background-color: red; */
  /* border-color: rgba(6, 118, 210, 0.56); */
  border-left: solid;
  border-right: solid;
  border-color: rgba(6, 118, 210, 0.56);
  width: 33%;
  height: 900px;
}
/* 左3 */
.d3 {
  /* background-color: rebeccapurple; */
  /* border-color: rgba(6, 118, 210, 0.56); */
  /* border-style: solid; */
  width: 34%;
  height: 900px;
}
/* 右上 */
.e1 {
  /* background-color: rebeccapurple; */
  /* border-style: solid; */
  border-bottom: solid;
  border-color: rgba(6, 118, 210, 0.56);
  width: 100%;
  height: 450px;
  display: flex;
  width: auto;
}
/* 右下 */
.e2 {
  /* background-color: black; */
  /* border-color: red; */
  /* border-style: solid; */
  width: 100%;
  height: 440px;
  /* 滚动条 */
  overflow-x: hidden;
  overflow-y: -1;
}
/* 右上1 */
.f1 {
  /* background-color: red; */
  /* border-color: red; */
  /* border-style: solid; */
  width: 33.3%;
  height: 439px;
  padding-top: 11px;
  padding-left: 15px;
}
/* 右上2 */
.f2 {
  /* background-color: green; */

  /* border-style: solid; */
  border-left: solid;
  border-right: solid;
  border-color: rgba(6, 118, 210, 0.56);
  width: 33.3%;
  height: 439px;
  padding-top: 11px;
  padding-left: 15px;
}
/* 右上3 */
.f3 {
  /* background-color: blue; */
  /* border-color: red; */
  /* border-style: solid; */
  width: 33.3%;
  height: 439px;
  padding-top: 11px;
  padding-left: 15px;
}
</style>
